import React, { useState } from 'react'
import './index.css'

export default function Item({id,todo,done,setTodoList,todoList}) {
  //鼠标移入移出，改变active类名，让状态变色
  //创建一个状态保存
  const [isActive,setIsActive] = useState(false)
  //可以使用同一个事件，用flase和true来改变状态
  const changeActHandle=(bool)=>{
      // console.log(bool);
      return ()=>{
        setIsActive(bool)
      }
  }

  // 点击多选框改变todolist的状态（表单的改变都用onchange）
 const changeListHandle =(e)=>{
  // console.log(e);
  //首先拿到当前点击的状态
   const inputState = todoList.map((item)=>{
       //判断当前id和数据id是不是同一条
       if(item.id === id){
        //如果符合条件返回修改done的新数据
        return {...item , done : e.target.checked}
       }
       //如果不符合id，则返回...之后的新数据
       return {...item}
   })
   setTodoList(inputState)
 }

  //给删除绑定点击事件
  const deleteCarHandle =()=>{
    //传入id后点击可以直接拿到id
     // console.log(id);
    //遍历数据，把对应id的删除
    // 删除就用filter
    const deleteCar = todoList.filter((item)=>{
      //  返回滤后的,当点击的id不等于原始id全部返回
        return  item.id !== id
      })

      setTodoList(deleteCar)
  }

  return (
    <li onMouseEnter={changeActHandle(true)} onMouseLeave={changeActHandle(false)} className = {isActive? 'active':''}>
    <label>
        <input type="checkbox" checked={done} onChange={changeListHandle}/>
        <span>{todo}</span>
    </label>
    <button className="btn btn-danger" onClick={deleteCarHandle} style={{display:isActive? 'block':'none'}}>删除</button>
    </li>
  )
}
